<template>
  <Container class="operation-caggiage">
    <div class="container-header title title-center" slot="header">
      运费设置
    </div>
    <div class="bg-light pb">
      <div class="container-title">在不同的应用模式下，商品运费生效方式不同：</div>
      <Form :model="form" :label-width="140" ref="form">
        <FormItem label="商品运费应用模式:">
          <RadioGroup v-model="form.freightType">
            <Radio label="PRODUCT_FREIGHT">商品运费模式</Radio>
            <Radio label="SHOP_FREIGHT">店铺运费模式</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <div v-show="form.freightType==='PRODUCT_FREIGHT'">
        <Alert class="ml20" style="width:1080px;" type="error">如发生一单内含多个商品且不同商品绑定了不同单品运费，则直接走店铺运费模式;最多可支持创建30个单品运费模板，在店铺运费模式下，单品运费模板不会生效</Alert>
      </div>
      <div v-show="form.freightType==='SHOP_FREIGHT'">
        <Alert class="ml20" style="width:800px;" type="error">店铺运费模式下按照订单纬度收取运费，一个订单只收取一次运费，没有设置配送地区自动按默认店铺模板的运费计算</Alert>
      </div>
      <div class="mt ml20">
        <Button type="primary" size="large" @click="onSave" :disabled="disabled">保存</Button>
      </div>
    </div>
    <div class="mt">
      <Tabs v-model="tab">
        <TabPane label="单品运费设置" name="tab1"><goods-temp /></TabPane>
        <TabPane label="店铺运费设置" name="tab2"><shop-temp /></TabPane>
      </Tabs>
    </div>
  </Container>
</template>
<script>
import GoodsTemp from './list/GoodsTemp'
import ShopTemp from './list/ShopTemp'
export default {
  name: 'operation/caggiage/index',
  components: {
    GoodsTemp,
    ShopTemp
  },
  data() {
    return {
      disabled: false,
      tab: 'tab1',
      id: null,
      form: {
        freightType: 'SHOP_FREIGHT'
      },
      initType: ''
    }
  },
  mounted() {
    this.getFreightType()
  },
  methods: {
    getFreightType() {
      this.$ajaxGet('/freight/config/findBy/supplierId').then(data => {
        this.id = data.id
        this.form.freightType = data.freightType
        this.initType = data.freightType
      })
    },
    onSave() {
      if (this.initType === this.form.freightType) {
        this.$Notice.info({
          title: '温馨提示',
          desc: '您没有切换商品运费应用模式 '
        })
        return
      }
      this.$Modal.confirm({
        title: "确认",
        content: "确认切换模版类型？",
        onOk: () => {
          this.onSaveType()
        },
        onCancel: () => {
          this.form.freightType = this.initType
        }
      })
    },
    onSaveType() {
      this.disabled = true
      let params = {
        id: this.id,
        freightType: this.form.freightType
      }
      this.$ajaxPost('/freight/config/update/freightType', params).then(res => {
        this.disabled = false
        this.$Notice.success({
          title: '保存成功'
        })
        this.getFreightType()
      }).catch(() => {
        this.disabled = false
      })
    }
  }
}
</script>